<template>
	<view class="content">
		<text class="title" v-if="oldPhone.length==0">未绑定手机</text>
		<text class="title" v-else>已绑定手机号:{{oldPhone}}</text>
		<text class="tips" style="margin-top: 20upx;">注意:手机号为本平台唯一联系方式</text>
		<view class="pass mar">
			<input  @input="change" placeholder="请输入手机号" type="number" v-model="phone" maxlength="11" :disabled="btn!='获取验证码'" />
			<image @tap="clear" src="../../static/images/clear.png" mode="aspectFill" v-show="isShow"></image>
		</view>
		<view class="pass in">
			<input type="number" placeholder="请输入验证码" v-model="code" maxlength="4" />
			<text  :class="isChange" @tap="realSend">{{btn}}</text>
		</view>
		<view :class="sendclass" @tap="bind">{{oldPhone.length==0?"绑 定":"重新绑定"}}</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var second = 120;
	import utils from "../../static/js/utils.js"
	export default {
		data() {
			return {
				phone: "",
				code: "",
				btnPhone: "",
				btn: "获取验证码",
				oldPhone: "",
				isChange: "send di"
			};
		},
		computed: {
			isShow() {
				return this.phone.length != 0;
			},
			sendclass() {
				if (this.btnPhone.length == 0) {
					return "btn dis";
				} else if (this.code.length == 0) {
					return "btn dis";
				} else {
					return "btn";
				}
			}
		},
		methods: {
			...mapMutations(['setPhone']),
			clear() {
				if (this.btn == "获取验证码") {
					this.phone = "";
					this.isChange = "send di";
				}
			},
			change(event) {
				let phone = event.detail.value;
				if (this.validate(phone)) {
					this.isChange = "send";
				} else {
					this.isChange = "send di";
				}
			},
			realSend() {
				if (this.btn == "获取验证码" && this.isChange == "send") {
					if (!this.validate(this.phone)) {
						utils.errorToast("手机号码格式错误");
						return;
					}
					var that = this;
					utils.loading("发送中");
					utils.post("user/getmessage", {
						phone: this.phone
					}, function(data) {
						that.send();
						that.btnPhone = that.phone;
						utils.successToast("发送成功");
					})
				}
			},
			validate(phone) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				return myreg.test(phone);

			},
			send() {
				if (second == 0) {
					this.btn = "发送";
					second = 120;
					this.isChange = "send"
				} else {
					this.btn = second + "s";
					this.isChange = "send di";
					second--;
					setTimeout(this.send, 1000);
				}
			},
			bind() {
				if (this.btnPhone.length == 0) {
					return;
				}
				if (this.code.length == 0) {
					return;
				}
				var that = this;
				utils.post("user/setphone", {
					phone: this.btnPhone,
					code: this.code
				}, function(data) {
					that.setPhone({
						phone: data
					});
					uni.navigateBack({
						delta: 1,
						animationType: 'zoom-fade-in',
						animationDuration: 200
					})
				})
			}
		},
		onLoad(option) {
			this.oldPhone = option.phone;
		}
	}
</script>

<style>
	.content {
		width: 86%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0px auto;
	}

	.title {
		font-size: 50upx;
		margin-top: 80upx;
	}

	.tips {
		font-size: 35upx;
		color: #666666;

	}

	.pass {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #dcdcdc;
		
	}
	.mar{
		margin-top: 110upx;
	}
	.in{
		margin-top: 50upx;
	}
	.pass input {
		flex: 1;
		height: 100upx;
		font-size: 36upx;
	}
	.send{
		font-size: 34upx;
		color:#36bbff
	}
	.di{
		color:#666666
	}
	.pass image {
		width: 50upx;
		height: 50upx;
	}

	.btn {
		width: 100%;
		height: 90upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #ffffff;
		margin-top: 100upx;
		line-height: 100upx;
		text-align: center;
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.dis {
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}
</style>
